<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

$stepActive = 3;
if( is_cart() )
    $stepActive = 1;
if( is_checkout() )
    $stepActive = 2;
?>
<script>
    jQuery(document).ready(function($) {
        function animCart(){
            var leftparam = $('div.points > div.one.active, div.points > div.two.active').css('left');
            $('div.points > div.one.active, div.points > div.two.active').delay('1000').animate({
                left: "+=70"
            }, 700, 'linear', function(){
               $(this).css("left", leftparam);
            });
        };
        setInterval(function(){animCart();},5000);
    });
</script>
<div id="abee-progress">
    <div>
        <div class="one-two <?php echo $stepActive > 1 ? 'active' : '' ?>"></div>
        <div class="two-three <?php echo $stepActive == 3 ? 'active' : '' ?>"></div>
    </div>
    <div class="points">
        <div class="one <?php echo $stepActive == 1 ? 'active' : '' ?> <?php echo $stepActive > 1 ? 'color' : '' ?>"></div>
        <div class="two <?php echo $stepActive == 2 ? 'active' : '' ?> <?php echo $stepActive > 2 ? 'color' : '' ?>"></div>
        <div class="three <?php echo $stepActive == 3 ? 'active' : '' ?>"></div>
    </div>

    <ol>
        <li class="color <?php echo $stepActive == 1 ? 'active' : '' ?>">Koszyk</li>
        <li class="<?php echo $stepActive > 1 ? 'color' : '' ?> <?php echo $stepActive == 2 ? 'active' : '' ?>">Wysyłka i płatność</li>
        <li class="<?php echo $stepActive == 3 ? 'color' : '' ?> <?php echo $stepActive == 3 ? 'active' : '' ?>">Koniec</li>
    </ol>
</div>
